
<template>
    <div>
        <Table  size="default"   border height="810"  :columns="columns" :data="clusterList" >    
            <template slot-scope="{ row, index }" slot="action">
                <div v-if="clusterList[index].status === 0">
                    <Button  size="default"  type="primary"  @click="enable(index)">启用</Button>
                </div>
                <div v-else>
                    <Button  size="default"  type="error"   @click="disable(index)">禁用</Button>
                </div>
            </template>
        </Table>    
    </div>
</template>

<script>

import store from '@/store';
import { post } from '@/api/http'
import { cluster_list,cluster_enable,cluster_disable,get_cluster_name_list,get_namespace_name_list } from  '@/api'
export default {
    name: 'ClusterList',
    data() {
        return {
            columns: [
                {
                    title: '集群名字',
                    key: 'cluster_name'
                },
                {
                    title: '集群类型',
                    key: 'cluster_type'
                },
                {
                    title: '集群配置',
                    key: 'cluster_config',
                    ellipsis: true,
                    tooltip: true,

                },
                {
                    title: '创建时间',
                    key: 'create_time'
                },
                {
                    title: 'Action',
                    slot: 'action',
                    width: 150,
                    align: 'center'
                }
            ],
            clusterList: [],
        };
    },
    methods: {
        enable(index) {
            let id = this.clusterList[index].id;
            let data = {"id":id}
            post(cluster_enable,data).then( (response) => {
                console.log(response.data);
                this.refresh()
                this.refresh_cluster_state() 
            })
        },

        disable(index) {
            let id = this.clusterList[index].id;
            let data = {"id":id }
            post(cluster_disable,data).then( (response) => {
                console.log(response.data);
                this.refresh()
                this.refresh_cluster_state() 
            })
        },
        //  重置集群和明名空间
        refresh_cluster_state() {
            post(get_cluster_name_list,{},{},30000).then(response =>{
                let cluster_list = response.data
                store.setClusterList(cluster_list)
                store.setClusterName(cluster_list[0])
                localStorage.setItem('currentCluster',cluster_list[0])
                // 初始化命名空间
                let headers = {'cluster_name':cluster_list[0]}
                post(get_namespace_name_list,{},headers).then(response => {
                    let namespace_list = response.data
                    store.setNamespaceList(namespace_list)
                    store.setNamespace(namespace_list[0])
                    localStorage.setItem('currentNameSpace',namespace_list[0])
                })
            })
        },
        refresh() {
            post(cluster_list).then( (response) => {
                this.clusterList = response.data;
            })
        }
    },
    mounted: function() {
        this.refresh()
    }

}
</script>

<style scoped>

</style>